<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
    //删除学生
    function delStu(uname1,inputObject){
        var result=confirm("确定要删除当前这个学生吗?");
        if (result) {
            /*发送异步ajax请求到后台删除当前这个学生的数据*/
            //1.创建ajax引擎对象
            var ajaxObject;
            if(window.XMLHttpRequest){//新浏览器
                ajaxObject=new XMLHttpRequest();
            }else{//IE5,6
                ajaxObject=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.创建请求
            ajaxObject.open("get","TeacherServlet?method=delStudentByName&uname="+uname1,true);
            //3.发送请求
            ajaxObject.send();
            //4.调用回调函数
            ajaxObject.onreadystatechange=function () {
                if (ajaxObject.readyState==4&&ajaxObject.status==200){
                    //接收响应结果
                    var result=ajaxObject.responseText;
                    alert(result);
                    //如果后台数据库表中已经将当前学生数据删除成功了,再删除前端学个学生对象就这一行
                    if(result=="1"){
                        //获得表格中要删除的这一行
                        var delTr=inputObject.parentNode.parentNode;
                        //获得要删除的这一行的父节点
                        var parent=delTr.parentNode;
                        //删除当前这一行
                        parent.removeChild(delTr);
                        alert(uname1+"删除成功");
                    }
                }
            }
        }
    }

    //修改学生信息
    function  updateStu(uname1){
        window.location="CommonServlet?method=getStudentByName&uname="+uname1;
    }

    //分页处理
    function  fenye(curr){
        //window.location="TeacherServlet?method=allStudent&currpage="+curr;
        //用ajax请求当前页面的数据,只刷新表格部分来实现局部刷新
        //1.创建ajax引擎对象
        var ajaxObject;
        if(window.XMLHttpRequest){//新浏览器
            ajaxObject=new XMLHttpRequest();
        }else{//IE5,6
            ajaxObject=new ActiveXObject("Microsoft.XMLHTTP")
        }

        //2.创建请求
        ajaxObject.open("get","TeacherServlet?method=allStudent&currpage="+curr,true);

        //3.发送ajax请求
        ajaxObject.send();

        //4.调用回调函数,接收响应数据
        ajaxObject.onreadystatechange=function () {
            //判断请求正常处理完,响应也正常时就接收结果
            if (ajaxObject.readyState==4&&ajaxObject.status==200){
                //声明一个变量接收响应分页的html页面
                var result=ajaxObject.responseText;

                //用ajax请求的嵌入数据的html替换table中数据,模板页面替换完后就成为当前页面一部分,当前页面所有js对模板也有用
                document.getElementById("tb1").innerHTML=result;
            }
        }
    }
</script>
<table border="1">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>邮箱</td>
        <td>爱好</td>
        <td>出生城市</td>
        <td>操作</td>
    </tr>
    <c:forEach var="s" items="${requestScope.stuList}">
        <tr>
            <td>${s.name}</td>
            <td>${s.sex}</td>
            <td>${s.email}</td>
            <td>${s.hobby}</td>
            <td>${s.city}</td>
            <td>
                <input type="button" value="修改" onclick="updateStu('${s.name}')"/>
                <input type="button" value="删除" onclick="delStu('${s.name}','${page1.currPage}')"/>
            </td>
        </tr>
    </c:forEach>
    <tr><td colspan="6"><a href="TeacherServlet?method=add">添加学生信息</a></td></tr>
    <tr><td colspan="6">
        <c:if test="${page1.currPage>1}">
            <input type="button" value="上一页" onclick="fenye(${page1.currPage-1})"/>
        </c:if>
        当前是第${page1.currPage}页
        <c:if test="${page1.currPage<page1.totalPage}" >
            <input type="button" value="下一页" onclick="fenye(${page1.currPage+1})"/>
        </c:if>
    </td></tr>
    <tr><td colspan="6">
        <h1>
            <c:forEach begin="1" end="${page1.totalPage}" step="1" varStatus="status">
                <a href="javaScript:void(0)" onclick="fenye(${status.index})">${status.index}</a>
            </c:forEach>
        </h1>
    </td></tr>
</table>

